import React, { memo, useState } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input, Select, DatePicker, Modal, message } from "antd";
import { FormInstance } from "antd/es/form/Form";
import Uploadyzh from "../upload";
import { passwordrules, usernamerules } from "@/utils/formrules";
import { formattime } from "@/utils";
import { register, uploadavatar } from "@/apis/user";
const { Option } = Select;

interface propsv {
  registevisiable: boolean;
  setRegistervisiable: Function;
  tologinmodel: Function;
  registerform: FormInstance<any>;
}

function Register(props: propsv) {
  const { registevisiable, setRegistervisiable, tologinmodel, registerform } =
    props;
  //头像
  const [avatar, setAvatar] = useState<string>(
    "https://image.notbucai.com/avatar.jpg"
  );
  const registeronFinish = async (value: any) => {
    value.birthday = formattime(value.birthday);
    const formdata = new FormData();
    formdata.set("picture", avatar);
    const result: any = await uploadavatar(formdata);
    value.avatar = result.result;
    const result1: any = await register(value);
    if (result1.status === 403) {
      return message.warn("用户名已经存在");
    }
    registerform.resetFields();
    message.success("注册成功");
  };
  return (
    <Modal
      visible={registevisiable}
      footer={null}
      onCancel={(e) => setRegistervisiable(false)}
      className="login-modal-content registerwrap"
    >
      <div className="top">
        <div className="left">
          <span>欢迎你,</span>
          <br />
          请填写以下信息进行注册
        </div>
        <span className="right" onClick={(e) => tologinmodel()}>
          返回登录
        </span>
      </div>

      <div className="form">
        <Form
          form={registerform}
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={registeronFinish}
          labelCol={{
            span: 4,
          }}
        >
          <Form.Item name="username" label="用户名" rules={usernamerules}>
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item name="password" label="密码" rules={passwordrules}>
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item
            name="confirm"
            label="确认密码"
            dependencies={["password"]}
            hasFeedback
            rules={[
              {
                required: true,
                message: "请确认密码!",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次密码不一致"));
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            name="sex"
            label="性别"
            rules={[{ required: true, message: "Please select gender!" }]}
          >
            <Select placeholder="select your gender">
              <Option value={0}>Male</Option>
              <Option value={1}>Female</Option>
            </Select>
          </Form.Item>
          <Form.Item name="birthday" label="生日" labelCol={{ span: 4 }}>
            <DatePicker />
          </Form.Item>
          <Form.Item
            name="introduction"
            label="Intro"
            rules={[{ required: true, message: "Please input Intro" }]}
          >
            <Input.TextArea showCount maxLength={100} />
          </Form.Item>
          <Form.Item label="头像">
            <Uploadyzh setAvatar={setAvatar}></Uploadyzh>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              size={"large"}
              className="login-form-button"
            >
              注册
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
}

export default memo(Register);
